<template>
  <div class="background">
    <el-container>
      <el-header style="margin: 0;padding: 0">
        <Header></Header>
      </el-header>
      <el-container id="content">
        <el-aside width="200px" style="margin: 0;padding: 0">
          <el-row class="tac">
            <el-col>
              <el-menu
                style="height: 100%"
                :default-active="index"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b">
                <router-link :to="{name:'UserInfo'}" style="text-decoration:none;color: white">
                  <el-menu-item index="2">
                    <i class="el-icon-document"></i>
                    个人信息
                    <!--<span slot="title" @click="showPersonalInfo">个人信息</span>-->
                  </el-menu-item>
                </router-link>
                <router-link :to="{name:'BlogManagemen'}" style="text-decoration:none;color: white">
                  <el-menu-item index="3">
                    <i class="el-icon-document"></i>
                    文章管理
                  </el-menu-item>
                </router-link>
                <!--<el-menu-item index="4">
                  <i class="el-icon-setting"></i>
                  <span slot="title">搜索博客</span>
                </el-menu-item>-->
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
          <!--<UserInfo :test="test" :userInfo="userInfo"></UserInfo>-->
          <!--<div>
            <h3>
              <i class="el-icon-eleme"> </i>
              <span>&nbsp&nbsp用户名:&nbsp&nbsp</span>
              <span style="margin-left: 30px">{{userInfo.name}}</span>
            </h3>
            <h3>
              <i class="el-icon-user">
              </i><span>&nbsp&nbsp昵称:&nbsp&nbsp</span>
              <span style="margin-left: 30px">{{userInfo.nickname}}</span>
            </h3>
            <h3>
              <i class="el-icon-s-help"> </i>
              <span>&nbsp&nbsp性别:&nbsp&nbsp</span>
              <span style="margin-left: 30px"> {{userInfo.sex===1?'男':'女'}}</span>
            </h3>
            <h3>
              <i class="el-icon-star-off"> </i>
              <span >&nbsp&nbsp邮箱:&nbsp&nbsp</span>
             <span style="margin-left: 30px"> {{userInfo.email}}</span>
            </h3>
            <h3>
              <i class="el-icon-phone"> </i>
              <span>&nbsp&nbsp电话:&nbsp&nbsp</span>
              <span style="margin-left: 30px">{{userInfo.phone}}</span>
            </h3>
          </div>-->
        </el-main>
      </el-container>
      <el-footer>
        <Footer></Footer>
      </el-footer>
    </el-container>
  </div>
</template>
<script>
import Header from '../common/Header'
import UserInfo from '../personal/UserInfo'

// eslint-disable-next-line no-unused-vars
import background from '../../assets/css/background.css'
import Footer from '../common/Footer'
export default {
  name: 'Center',
  components: {
    Footer,
    Header,
    // eslint-disable-next-line vue/no-unused-components
    UserInfo
  },
  data () {
    return {
      userInfo: {},
      test: 'l',
      index: '2'
    }
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    showPersonalInfo () {
      const _this = this
      const id = JSON.parse(localStorage.getItem('userInfo')).userId
      this.$axios.get('/info/' + id)
        .then((res) => {
          _this.userInfo = res.data.data
        })
    }
  },
  created () {
    console.log(this.$route.path)
    if (this.$route.path === '/BlogManagemen') {
      this.index = '3'
    }
    this.showPersonalInfo()
  }
}
</script>
<style>
  #content {
    margin: 20px;
  }
</style>
